<template>
  <div class="container">
    <van-popup round v-model="popupShow" position="bottom" @close="popupClose">
      <template v-if="popupState == 'picker'">
        <van-picker
          show-toolbar
          :columns="pickerData"
          @confirm="pickerConfirm"
          @cancel="pickerCancel"
        />
      </template>
      <template v-if="popupState == 'cascader'">
        <van-cascader
          :field-names="fieldNames"
          v-model="cascaderValue"
          title="请选择所属区域"
          :options="cascadeOptions"
          active-color="#D58913"
          @finish="cascaderFinish"
          @close="cascaderClose"
        />
      </template>
      <template v-if="popupState == 'map'">
        <Map
          v-if="popupState == 'map'"
          @getLngLat="getLngLat"
          :data="formData"
        ></Map>
      </template>
    </van-popup>

    <div class="container-inner">
      <van-form
        ref="form"
        label-width="110px"
        scroll-to-error
        :show-error-message="false"
        @failed="onFailed"
        @submit="onSubmit"
      >
        <div class="card base" v-if="false">
          <div class="card-bar">
            <div class="card-bar-title">本人基本信息</div>
          </div>
          <div class="card-container">
            <van-field
              v-model="formData.name"
              clearable
              maxlength="20"
              readonly
              :rules="[{ required: true, message: '请检查姓名' }]"
              name="name"
              label="姓名"
              input-align="right"
              placeholder="请输入姓名"
            >
            </van-field>
            <van-field
              v-model="formData.mobile"
              clearable
              maxlength="11"
              readonly
              :rules="[{ required: true, message: '请检查联系方式' }]"
              name="mobile"
              type="mobile"
              label="联系方式"
              input-align="right"
              placeholder="请输入联系方式"
            >
            </van-field>
            <van-field
              v-model="formData.card_no"
              clearable
              maxlength="18"
              readonly
              :rules="[{ required: true, message: '请检查身份证号' }]"
              name="card_no"
              label="身份证号"
              input-align="right"
              placeholder="请输入身份证号"
            >
            </van-field>
            <van-field
              v-model="formData.c_date"
              clearable
              maxlength="18"
              readonly
              :rules="[{ required: true, message: '请检查填报日期' }]"
              name="c_date"
              label="填报日期"
              input-align="right"
              placeholder="请输入填报日期"
            >
            </van-field>
          </div>
        </div>

        <div class="card condition mt20">
          <div class="card-bar">
            <div class="card-bar-title">本人基本情况</div>
          </div>
          <div class="card-container">
            <van-field
              name="body_situation"
              required
              :rules="[{ required: true, message: '请检查身体情况' }]"
              label="身体情况"
            >
              <template #input>
                <van-radio-group
                  v-model="formData.body_situation"
                  checked-color="#D58913"
                  direction="horizontal"
                  @change="radioChange($event, 'body_situation')"
                >
                  <van-radio name="0">正常</van-radio>
                  <van-radio name="1">异常</van-radio>
                </van-radio-group>
              </template>
            </van-field>
            <van-field
              v-if="formData.body_situation == 1"
              name="discomfortArr"
              label="病症病状"
              required
              :rules="[{ required: true, message: '请检查必填项' }]"
            >
              <template #input>
                <van-checkbox-group
                  v-model="formData.discomfortArr"
                  direction="horizontal"
                >
                  <van-row>
                    <van-col span="12">
                      <van-checkbox
                        checked-color="#D58913"
                        name="发热"
                        shape="square"
                        >发热</van-checkbox
                      >
                    </van-col>
                    <van-col span="12">
                      <van-checkbox
                        checked-color="#D58913"
                        name="干咳"
                        shape="square"
                        >干咳</van-checkbox
                      >
                    </van-col>
                    <van-col span="12">
                      <van-checkbox
                        checked-color="#D58913"
                        name="乏力"
                        shape="square"
                        >乏力</van-checkbox
                      >
                    </van-col>
                    <van-col span="12">
                      <van-checkbox
                        checked-color="#D58913"
                        name="鼻塞"
                        shape="square"
                        >鼻塞</van-checkbox
                      >
                    </van-col>
                    <van-col span="12">
                      <van-checkbox
                        checked-color="#D58913"
                        name="流涕"
                        shape="square"
                        >流涕</van-checkbox
                      >
                    </van-col>
                    <van-col span="12">
                      <van-checkbox
                        checked-color="#D58913"
                        name="咽痛"
                        shape="square"
                        >咽痛</van-checkbox
                      >
                    </van-col>
                    <van-col span="12">
                      <van-checkbox
                        checked-color="#D58913"
                        name="肌痛"
                        shape="square"
                        >肌痛</van-checkbox
                      >
                    </van-col>
                    <van-col span="12">
                      <van-checkbox
                        checked-color="#D58913"
                        name="结膜炎"
                        shape="square"
                        >结膜炎</van-checkbox
                      >
                    </van-col>
                    <van-col span="11">
                      <van-checkbox
                        checked-color="#D58913"
                        name="腹泻"
                        shape="square"
                        >腹泻</van-checkbox
                      >
                    </van-col>
                    <van-col span="24">
                      <van-checkbox
                        checked-color="#D58913"
                        name="嗅（味）觉减退（丧失）"
                        shape="square"
                        >嗅（味）觉减退（丧失）</van-checkbox
                      >
                    </van-col>
                  </van-row>
                </van-checkbox-group>
              </template>
            </van-field>
            <van-field
              v-model="formData.temperature"
              type="number"
              required
              maxlength="4"
              :rules="[
                {
                  required: true,
                  validator: tempValidator,
                  message: '请检查体温',
                },
              ]"
              name="temperature"
              label="体温"
              placeholder="请输入体温"
            >
            </van-field>
            <van-field
              readonly
              clickable
              is-link
              name="ascription"
              :value="formData.ascription"
              label="今日所属区域"
              placeholder="点击选择"
              @click="pickerChange('ascription')"
              required
              :rules="[{ required: true, message: '请检查今日所属区域' }]"
            >
            </van-field>
            <van-field
              v-model="formData.quarter"
              required
              clearable
              maxlength="20"
              :rules="[{ required: true, message: '请检查今日所属小区' }]"
              name="quarter"
              placeholder="请输入今日所属小区"
            >
              <template #label>
                <div class="field-title">今日所属小区</div>
                <div class="field-text">(或无则住宅楼名)</div>
              </template>
            </van-field>
            <van-field
              v-model="formData.address"
              rows="3"
              autosize
              label="今日详细地址"
              type="textarea"
              maxlength="255"
              placeholder="请输入今日详细地址"
              required
              :rules="[{ required: true, message: '请检查今日详细地址' }]"
            >
            </van-field>
            <van-field name="loc" label="今日地址坐标">
              <template #input>
                <div class="w100 h100 mid">
                  <van-button
                    class="margin-l-auto"
                    style="width: 100px"
                    native-type="button"
                    size="small"
                    color="#D58913"
                    plain
                    @click="pickerChange('map')"
                    >{{
                      formData.lng && formData.lat ? '修改' : '选择'
                    }}</van-button
                  >
                </div>
              </template>
            </van-field>
          </div>
        </div>

        <div class="card epidemic mt20">
          <div class="card-bar">
            <div class="card-bar-title">流行病学史</div>
          </div>
          <div class="card-container">
            <div class="card-container-item">
              <div class="card-item-label">{{ dict.epidemic.desc1 }}</div>
              <div class="card-item-content">
                <van-field
                  name="is_lxbxs_zgdqljs_br"
                  :required="false"
                  :rules="[{ required: true, message: '请检查流行病学史' }]"
                  label="本人"
                >
                  <template #input>
                    <van-radio-group
                      v-model="formData.is_lxbxs_zgdqljs_br"
                      checked-color="#D58913"
                      direction="horizontal"
                    >
                      <van-radio name="1">是</van-radio>
                      <van-radio name="0">否</van-radio>
                    </van-radio-group>
                  </template>
                </van-field>
                <van-field
                  name="is_lxbxs_zgdqljs_gtjzz"
                  :required="false"
                  :rules="[{ required: true, message: '请检查流行病学史' }]"
                  label="共同居住者"
                >
                  <template #input>
                    <van-radio-group
                      v-model="formData.is_lxbxs_zgdqljs_gtjzz"
                      checked-color="#D58913"
                      direction="horizontal"
                    >
                      <van-radio name="1">是</van-radio>
                      <van-radio name="0">否</van-radio>
                    </van-radio-group>
                  </template>
                </van-field>
                <resident-checkbox
                  v-if="residentShow && formData.is_lxbxs_zgdqljs_gtjzz == '1'"
                  :list="residentList"
                  :checked-ids="formData.is_lxbxs_zgdqljs_gtjzz_residents"
                  @change="
                    residentChange($event, 'is_lxbxs_zgdqljs_gtjzz_residents')
                  "
                ></resident-checkbox>
              </div>
            </div>
            <div class="card-container-item">
              <div class="card-item-label">{{ dict.epidemic.desc2 }}</div>
              <div class="card-item-content">
                <van-field
                  name="is_lxbxs_jwljs_br"
                  :required="false"
                  :rules="[{ required: true, message: '请检查流行病学史' }]"
                  label="本人"
                >
                  <template #input>
                    <van-radio-group
                      v-model="formData.is_lxbxs_jwljs_br"
                      checked-color="#D58913"
                      direction="horizontal"
                    >
                      <van-radio name="1">是</van-radio>
                      <van-radio name="0">否</van-radio>
                    </van-radio-group>
                  </template>
                </van-field>
                <van-field
                  name="is_lxbxs_jwljs_gtjzz"
                  :required="false"
                  :rules="[{ required: true, message: '请检查流行病学史' }]"
                  label="共同居住者"
                >
                  <template #input>
                    <van-radio-group
                      v-model="formData.is_lxbxs_jwljs_gtjzz"
                      checked-color="#D58913"
                      direction="horizontal"
                    >
                      <van-radio name="1">是</van-radio>
                      <van-radio name="0">否</van-radio>
                    </van-radio-group>
                  </template>
                </van-field>
                <resident-checkbox
                  v-if="residentShow && formData.is_lxbxs_jwljs_gtjzz == '1'"
                  :list="residentList"
                  :checked-ids="formData.is_lxbxs_jwljs_gtjzz_residents"
                  @change="
                    residentChange($event, 'is_lxbxs_jwljs_gtjzz_residents')
                  "
                ></resident-checkbox>
              </div>
            </div>
            <div class="card-container-item">
              <div class="card-item-label">{{ dict.epidemic.desc3 }}</div>
              <div class="card-item-content">
                <van-field
                  name="is_lxbxs_jcfrhz_br"
                  :required="false"
                  :rules="[{ required: true, message: '请检查流行病学史' }]"
                  label="本人"
                >
                  <template #input>
                    <van-radio-group
                      v-model="formData.is_lxbxs_jcfrhz_br"
                      checked-color="#D58913"
                      direction="horizontal"
                    >
                      <van-radio name="1">是</van-radio>
                      <van-radio name="0">否</van-radio>
                    </van-radio-group>
                  </template>
                </van-field>
                <van-field
                  name="is_lxbxs_jcfrhz_gtjzz"
                  :required="false"
                  :rules="[{ required: true, message: '请检查流行病学史' }]"
                  label="共同居住者"
                >
                  <template #input>
                    <van-radio-group
                      v-model="formData.is_lxbxs_jcfrhz_gtjzz"
                      checked-color="#D58913"
                      direction="horizontal"
                    >
                      <van-radio name="1">是</van-radio>
                      <van-radio name="0">否</van-radio>
                    </van-radio-group>
                  </template>
                </van-field>
                <resident-checkbox
                  v-if="residentShow && formData.is_lxbxs_jcfrhz_gtjzz == '1'"
                  :list="residentList"
                  :checked-ids="formData.is_lxbxs_jcfrhz_gtjzz_residents"
                  @change="
                    residentChange($event, 'is_lxbxs_jcfrhz_gtjzz_residents')
                  "
                ></resident-checkbox>
              </div>
            </div>
            <div class="card-container-item">
              <div class="card-item-label">{{ dict.epidemic.desc4 }}</div>
              <div class="card-item-content">
                <van-field
                  name="is_lxbxs_jcxggrz_br"
                  :required="false"
                  :rules="[{ required: true, message: '请检查流行病学史' }]"
                  label="本人"
                >
                  <template #input>
                    <van-radio-group
                      v-model="formData.is_lxbxs_jcxggrz_br"
                      checked-color="#D58913"
                      direction="horizontal"
                    >
                      <van-radio name="1">是</van-radio>
                      <van-radio name="0">否</van-radio>
                    </van-radio-group>
                  </template>
                </van-field>
                <van-field
                  name="is_lxbxs_jcxggrz_gtjzz"
                  :required="false"
                  :rules="[{ required: true, message: '请检查流行病学史' }]"
                  label="共同居住者"
                >
                  <template #input>
                    <van-radio-group
                      v-model="formData.is_lxbxs_jcxggrz_gtjzz"
                      checked-color="#D58913"
                      direction="horizontal"
                    >
                      <van-radio name="1">是</van-radio>
                      <van-radio name="0">否</van-radio>
                    </van-radio-group>
                  </template>
                </van-field>
                <resident-checkbox
                  v-if="residentShow && formData.is_lxbxs_jcxggrz_gtjzz == '1'"
                  :list="residentList"
                  :checked-ids="formData.is_lxbxs_jcxggrz_gtjzz_residents"
                  @change="
                    residentChange($event, 'is_lxbxs_jcxggrz_gtjzz_residents')
                  "
                ></resident-checkbox>
              </div>
            </div>
            <div class="card-container-item">
              <div class="card-item-label">{{ dict.epidemic.desc5 }}</div>
              <div class="card-item-content">
                <van-field
                  name="is_lxbxs_jjx_br"
                  :required="false"
                  :rules="[{ required: true, message: '请检查流行病学史' }]"
                  label="本人"
                >
                  <template #input>
                    <van-radio-group
                      v-model="formData.is_lxbxs_jjx_br"
                      checked-color="#D58913"
                      direction="horizontal"
                    >
                      <van-radio name="1">是</van-radio>
                      <van-radio name="0">否</van-radio>
                    </van-radio-group>
                  </template>
                </van-field>
                <van-field
                  name="is_lxbxs_jjx_gtjzz"
                  :required="false"
                  :rules="[{ required: true, message: '请检查流行病学史' }]"
                  label="共同居住者"
                >
                  <template #input>
                    <van-radio-group
                      v-model="formData.is_lxbxs_jjx_gtjzz"
                      checked-color="#D58913"
                      direction="horizontal"
                    >
                      <van-radio name="1">是</van-radio>
                      <van-radio name="0">否</van-radio>
                    </van-radio-group>
                  </template>
                </van-field>
                <resident-checkbox
                  v-if="residentShow && formData.is_lxbxs_jjx_gtjzz == '1'"
                  :list="residentList"
                  :checked-ids="formData.is_lxbxs_jjx_gtjzz_residents"
                  @change="
                    residentChange($event, 'is_lxbxs_jjx_gtjzz_residents')
                  "
                ></resident-checkbox>
              </div>
            </div>
          </div>
        </div>

        <div class="card risk mt20">
          <div class="card-bar">
            <div class="card-bar-title">风险人群</div>
          </div>
          <div class="card-container">
            <div class="card-container-item">
              <div class="card-item-label">{{ dict.risk.desc1 }}</div>
              <div class="card-item-content">
                <van-field
                  name="is_fxrq_lxbxs_br"
                  :required="false"
                  :rules="[{ required: true, message: '请检查风险人群' }]"
                  label="本人"
                >
                  <template #input>
                    <van-radio-group
                      v-model="formData.is_fxrq_lxbxs_br"
                      checked-color="#D58913"
                      direction="horizontal"
                    >
                      <van-radio name="1">是</van-radio>
                      <van-radio name="0">否</van-radio>
                    </van-radio-group>
                  </template>
                </van-field>
                <van-field
                  name="is_fxrq_lxbxs_gtjzz"
                  :required="false"
                  :rules="[{ required: true, message: '请检查风险人群' }]"
                  label="共同居住者"
                >
                  <template #input>
                    <van-radio-group
                      v-model="formData.is_fxrq_lxbxs_gtjzz"
                      checked-color="#D58913"
                      direction="horizontal"
                    >
                      <van-radio name="1">是</van-radio>
                      <van-radio name="0">否</van-radio>
                    </van-radio-group>
                  </template>
                </van-field>
                <resident-checkbox
                  v-if="residentShow && formData.is_fxrq_lxbxs_gtjzz == '1'"
                  :list="residentList"
                  :checked-ids="formData.is_fxrq_lxbxs_gtjzz_residents"
                  @change="
                    residentChange($event, 'is_fxrq_lxbxs_gtjzz_residents')
                  "
                ></resident-checkbox>
              </div>
            </div>
            <div class="card-container-item">
              <div class="card-item-subtitle">{{ dict.risk.subtitle1 }}</div>
              <div class="card-item-label">{{ dict.risk.desc2 }}</div>
              <div class="card-item-content">
                <van-field
                  name="is_fxrq_jkll_br"
                  :required="false"
                  :rules="[{ required: true, message: '请检查风险人群' }]"
                  label="本人"
                >
                  <template #input>
                    <van-radio-group
                      v-model="formData.is_fxrq_jkll_br"
                      checked-color="#D58913"
                      direction="horizontal"
                    >
                      <van-radio name="1">是</van-radio>
                      <van-radio name="0">否</van-radio>
                    </van-radio-group>
                  </template>
                </van-field>
                <van-field
                  name="is_fxrq_jkll_gtjzz"
                  :required="false"
                  :rules="[{ required: true, message: '请检查风险人群' }]"
                  label="共同居住者"
                >
                  <template #input>
                    <van-radio-group
                      v-model="formData.is_fxrq_jkll_gtjzz"
                      checked-color="#D58913"
                      direction="horizontal"
                    >
                      <van-radio name="1">是</van-radio>
                      <van-radio name="0">否</van-radio>
                    </van-radio-group>
                  </template>
                </van-field>
                <resident-checkbox
                  v-if="residentShow && formData.is_fxrq_jkll_gtjzz == '1'"
                  :list="residentList"
                  :checked-ids="formData.is_fxrq_jkll_gtjzz_residents"
                  @change="
                    residentChange($event, 'is_fxrq_jkll_gtjzz_residents')
                  "
                ></resident-checkbox>
              </div>
            </div>
            <div class="card-container-item">
              <div class="card-item-label">{{ dict.risk.desc3 }}</div>
              <div class="card-item-content">
                <van-field
                  name="is_fxrq_jzyx_br"
                  :required="false"
                  :rules="[{ required: true, message: '请检查风险人群' }]"
                  label="本人"
                >
                  <template #input>
                    <van-radio-group
                      v-model="formData.is_fxrq_jzyx_br"
                      checked-color="#D58913"
                      direction="horizontal"
                    >
                      <van-radio name="1">是</van-radio>
                      <van-radio name="0">否</van-radio>
                    </van-radio-group>
                  </template>
                </van-field>
                <van-field
                  name="is_fxrq_jzyx_gtjzz"
                  :required="false"
                  :rules="[{ required: true, message: '请检查风险人群' }]"
                  label="共同居住者"
                >
                  <template #input>
                    <van-radio-group
                      v-model="formData.is_fxrq_jzyx_gtjzz"
                      checked-color="#D58913"
                      direction="horizontal"
                    >
                      <van-radio name="1">是</van-radio>
                      <van-radio name="0">否</van-radio>
                    </van-radio-group>
                  </template>
                </van-field>
                <resident-checkbox
                  v-if="residentShow && formData.is_fxrq_jzyx_gtjzz == '1'"
                  :list="residentList"
                  :checked-ids="formData.is_fxrq_jzyx_gtjzz_residents"
                  @change="
                    residentChange($event, 'is_fxrq_jzyx_gtjzz_residents')
                  "
                ></resident-checkbox>
              </div>
            </div>
            <div class="card-container-item">
              <div class="card-item-label">{{ dict.risk.desc4 }}</div>
              <div class="card-item-content">
                <van-field
                  name="is_fxrq_xgfy_br"
                  :required="false"
                  :rules="[{ required: true, message: '请检查风险人群' }]"
                  label="本人"
                >
                  <template #input>
                    <van-radio-group
                      v-model="formData.is_fxrq_xgfy_br"
                      checked-color="#D58913"
                      direction="horizontal"
                    >
                      <van-radio name="1">是</van-radio>
                      <van-radio name="0">否</van-radio>
                    </van-radio-group>
                  </template>
                </van-field>
                <van-field
                  name="is_fxrq_xgfy_gtjzz"
                  :required="false"
                  :rules="[{ required: true, message: '请检查风险人群' }]"
                  label="共同居住者"
                >
                  <template #input>
                    <van-radio-group
                      v-model="formData.is_fxrq_xgfy_gtjzz"
                      checked-color="#D58913"
                      direction="horizontal"
                    >
                      <van-radio name="1">是</van-radio>
                      <van-radio name="0">否</van-radio>
                    </van-radio-group>
                  </template>
                </van-field>
                <resident-checkbox
                  v-if="residentShow && formData.is_fxrq_xgfy_gtjzz == '1'"
                  :list="residentList"
                  :checked-ids="formData.is_fxrq_xgfy_gtjzz_residents"
                  @change="
                    residentChange($event, 'is_fxrq_xgfy_gtjzz_residents')
                  "
                ></resident-checkbox>
              </div>
            </div>
            <div class="card-container-item">
              <div class="card-item-label">{{ dict.risk.desc5 }}</div>
              <div class="card-item-content">
                <van-field
                  name="is_fxrq_bj_br"
                  :required="false"
                  :rules="[{ required: true, message: '请检查风险人群' }]"
                  label="本人"
                >
                  <template #input>
                    <van-radio-group
                      v-model="formData.is_fxrq_bj_br"
                      checked-color="#D58913"
                      direction="horizontal"
                    >
                      <van-radio name="1">是</van-radio>
                      <van-radio name="0">否</van-radio>
                    </van-radio-group>
                  </template>
                </van-field>
                <van-field
                  name="is_fxrq_bj_gtjzz"
                  :required="false"
                  :rules="[{ required: true, message: '请检查风险人群' }]"
                  label="共同居住者"
                >
                  <template #input>
                    <van-radio-group
                      v-model="formData.is_fxrq_bj_gtjzz"
                      checked-color="#D58913"
                      direction="horizontal"
                    >
                      <van-radio name="1">是</van-radio>
                      <van-radio name="0">否</van-radio>
                    </van-radio-group>
                  </template>
                </van-field>
                <resident-checkbox
                  v-if="residentShow && formData.is_fxrq_bj_gtjzz == '1'"
                  :list="residentList"
                  :checked-ids="formData.is_fxrq_bj_gtjzz_residents"
                  @change="residentChange($event, 'is_fxrq_bj_gtjzz_residents')"
                ></resident-checkbox>
              </div>
            </div>
            <div class="card-container-item">
              <div class="card-item-label">{{ dict.risk.desc6 }}</div>
              <div class="card-item-content">
                <van-field
                  name="is_fxrq_nrsq_br"
                  :required="false"
                  :rules="[{ required: true, message: '请检查风险人群' }]"
                  label="本人"
                >
                  <template #input>
                    <van-radio-group
                      v-model="formData.is_fxrq_nrsq_br"
                      checked-color="#D58913"
                      direction="horizontal"
                    >
                      <van-radio name="1">是</van-radio>
                      <van-radio name="0">否</van-radio>
                    </van-radio-group>
                  </template>
                </van-field>
                <van-field
                  name="is_fxrq_nrsq_gtjzz"
                  :required="false"
                  :rules="[{ required: true, message: '请检查风险人群' }]"
                  label="共同居住者"
                >
                  <template #input>
                    <van-radio-group
                      v-model="formData.is_fxrq_nrsq_gtjzz"
                      checked-color="#D58913"
                      direction="horizontal"
                    >
                      <van-radio name="1">是</van-radio>
                      <van-radio name="0">否</van-radio>
                    </van-radio-group>
                  </template>
                </van-field>
                <resident-checkbox
                  v-if="residentShow && formData.is_fxrq_nrsq_gtjzz == '1'"
                  :list="residentList"
                  :checked-ids="formData.is_fxrq_nrsq_gtjzz_residents"
                  @change="
                    residentChange($event, 'is_fxrq_nrsq_gtjzz_residents')
                  "
                ></resident-checkbox>
              </div>
            </div>
          </div>
        </div>

        <div class="card vacciens mt20" v-if="false">
          <div class="card-bar">
            <div class="card-bar-title">新冠疫苗接种情况</div>
          </div>
          <div class="card-container">
            <van-field
              v-model="'已接种 ' + formData.vacciens_inoculation + ' 针'"
              clearable
              readonly
              name="vacciens_inoculation"
              label="当前情况"
              input-align="right"
              placeholder=""
            >
            </van-field>
          </div>
        </div>

        <div class="footer">
          <div class="footer-content">
            <div>以上信息请如实填写，确保所填信息真实性</div>
            <div>如有提供虚假信息，需承担相应法律责任</div>
          </div>
        </div>
      </van-form>
    </div>

    <div class="bottom-bar">
      <van-button
        class="bottom-bar-btn"
        block
        size="large"
        color="#D58913"
        type="info"
        text="确认提交"
        @click="beforeSubmitAction"
      />
    </div>
  </div>
</template>

<script>
import dict from './dict/others'
import { identityCodeValid, identityTemp } from '@/libs/tools'
import {
  getDLAreaList,
  getResidentAllList,
  getHealthInfo,
  getStudentInfoById,
  getTeacherInfoById,
  getWorkerInfoById,
  saveHealthInfo,
  getOutsiderInfo,
  insertHealthReport,
  outsiderHealthInfo,
  getExitInfo,
  getExitHealthInfo,
  insertExitHealthInfo,
  getReturnInfo,
  getReturnHealthInfo,
  insertReturnHealthInfo,
  getExamInfo,
  getExamHealthInfo,
  insertExamHealthInfo,
} from '@/api/school'
import ResidentCheckbox from '@/views/school/components/resident-checkbox'
import Map from '@/views/school/components/map'

export default {
  components: { ResidentCheckbox, Map },
  data() {
    return {
      dict,
      route: {},
      userInfo: {},
      popupShow: false,
      popupState: '',
      pickerType: '',
      pickerData: [],
      userData: {},
      disabled: {},
      formData: {
        discomfortArr: [],
        body_situation: '0',
        temperature: 36.5,
        is_lxbxs_zgdqljs_br: '0',
        is_lxbxs_zgdqljs_gtjzz: '0',
        is_lxbxs_jwljs_br: '0',
        is_lxbxs_jwljs_gtjzz: '0',
        is_lxbxs_jcfrhz_br: '0',
        is_lxbxs_jcfrhz_gtjzz: '0',
        is_lxbxs_jcxggrz_br: '0',
        is_lxbxs_jcxggrz_gtjzz: '0',
        is_lxbxs_jjx_br: '0',
        is_lxbxs_jjx_gtjzz: '0',
        is_fxrq_lxbxs_br: '0',
        is_fxrq_lxbxs_gtjzz: '0',
        is_fxrq_jkll_br: '0',
        is_fxrq_jkll_gtjzz: '0',
        is_fxrq_jzyx_br: '0',
        is_fxrq_jzyx_gtjzz: '0',
        is_fxrq_xgfy_br: '0',
        is_fxrq_xgfy_gtjzz: '0',
        is_fxrq_bj_br: '0',
        is_fxrq_bj_gtjzz: '0',
        is_fxrq_nrsq_br: '0',
        is_fxrq_nrsq_gtjzz: '0',
        vacciens_inoculation: 0,
      },
      cascaderShow: false,
      cascaderValue: '',
      cascadeOptions: [],
      fieldNames: {
        text: 'name',
        value: 'code',
        children: 'children',
      },
      dictData: {},
      submitApiName: null,
      residentList: [],
    }
  },
  computed: {
    residentShow() {
      const types = ['children', 'teacher', 'worker']
      return types.includes(this.route.type)
    },
  },
  watch: {},
  mounted() {
    this.route = this.$route.query
    this.init()
  },
  methods: {
    residentChange(current, key) {
      let arr = current.map((item) => {
        return item.id
      })
      const str = arr.join(',')
      this.$set(this.formData, key, str)
    },
    radioChange(value, type) {
      switch (type) {
        case 'body_situation':
          if (value == 0) {
            this.formData.discomfortArr = []
            this.formData.symptom = ''
          }
          break
      }
    },
    async init() {
      // 获取区域所属
      const areaData = await getDLAreaList()
      if (areaData.data.errcode == 0) {
        let options = this.$common.xeUtils.toArrayTree(areaData.data.data, {
          strict: true,
          parentKey: 'parent_id',
          key: 'id',
          children: 'children',
        })
        this.cascadeOptions = options[0].children
      }
      // 获取居住人列表
      if (['children', 'teacher', 'worker'].includes(this.route.type)) {
        // 获取全量居住人数据
        // const residentParam = {
        //   parent_id: this.route.parent_id,
        //   teacher_id: this.route.teacher_id,
        //   workers_id: this.route.workers_id,
        //   type: this.route.type
        // }
        // const residentData = await getResidentAllList(residentParam)
        // if (residentData.data.errcode == 0) {
        //   this.residentList = residentData.data.data
        // }
        // 获取选中居住人
        this.residentList = localStorage.getItem('residentList')
          ? JSON.parse(localStorage.getItem('residentList'))
          : []
        // console.log('传入的居住人', this.residentList)
      }
      // 获取基本信息
      let apiName = null
      let healthApiName = null
      let param = { type: this.route.type }
      switch (this.route.type) {
        case 'children':
          apiName = getStudentInfoById
          healthApiName = getHealthInfo
          param.id = this.route.student_id
          this.submitApiName = saveHealthInfo
          break
        case 'teacher':
          apiName = getTeacherInfoById
          healthApiName = getHealthInfo
          param.id = this.route.teacher_id
          this.submitApiName = saveHealthInfo
          break
        case 'worker':
          apiName = getWorkerInfoById
          healthApiName = getHealthInfo
          param.id = this.route.workers_id
          this.submitApiName = saveHealthInfo
          break
        case 'outsider':
          apiName = getOutsiderInfo
          healthApiName = outsiderHealthInfo
          param.card_no = this.route.card_no
          this.submitApiName = insertHealthReport
          this.$set(this.formData, 'school_id', this.route.school_id)
          break
        case 'exit':
          apiName = getExitInfo
          healthApiName = getExitHealthInfo
          param.card_no = this.route.card_no
          this.submitApiName = insertExitHealthInfo
          param.record_id = this.route.record_id
          this.$set(this.formData, 'record_id', this.route.record_id)
          break
        case 'return':
          apiName = getReturnInfo
          healthApiName = getReturnHealthInfo
          param.card_no = this.route.card_no
          this.submitApiName = insertReturnHealthInfo
          param.record_id = this.route.record_id
          this.$set(this.formData, 'record_id', this.route.record_id)
          break
        case 'exam':
          apiName = getExamInfo
          healthApiName = getExamHealthInfo
          param.card_no = this.route.card_no
          this.submitApiName = insertExamHealthInfo
          param.record_id = this.route.record_id
          this.$set(this.formData, 'record_id', this.route.record_id)
          break
      }
      const baseInfo = await apiName(param)
      if (baseInfo.data.errcode == 0) {
        this.$set(this.formData, 'name', baseInfo.data.data.name)
        this.$set(this.formData, 'card_no', baseInfo.data.data.card_no)
        this.$set(this.formData, 'mobile', baseInfo.data.data.tel)
        if (this.route.type == 'outsider') {
          this.$set(this.formData, 'visit_id', baseInfo.data.data.id)
          param.visit_id = baseInfo.data.data.id
        }
      }
      // 设置当日日期
      this.$set(
        this.formData,
        'c_date',
        this.$common.xeUtils.toDateString(new Date(), 'yyyy-MM-dd')
      )
      this.$set(
        this.formData,
        'date',
        this.$common.xeUtils.toDateString(new Date(), 'yyyyMMdd')
      )
      // 获取历史填报信息
      // this.$set(this.formData, 'is_lxbxs_zgdqljs_gtjzz', '1')
      // this.$set(this.formData, 'is_lxbxs_zgdqljs_gtjzz_residents', '81df8ce9-dca7-11ec-9921-0242ac110002')
      const healthInfo = await healthApiName(param)
      if (healthInfo.data.errcode == 0 && healthInfo.data.data) {
        if (healthInfo.data.data.create_time)
          this.$set(
            this.formData,
            'create_time',
            healthInfo.data.data.create_time
          )
        /*基本情况*/
        if (healthInfo.data.data.body_situation)
          this.$set(
            this.formData,
            'body_situation',
            healthInfo.data.data.body_situation
          )
        if (healthInfo.data.data.symptom) {
          this.$set(
            this.formData,
            'discomfortArr',
            healthInfo.data.data.symptom.split(',')
          )
          this.$set(this.formData, 'symptom', healthInfo.data.data.symptom)
        }
        if (healthInfo.data.data.temperature)
          this.$set(
            this.formData,
            'temperature',
            healthInfo.data.data.temperature
          )
        if (healthInfo.data.data.area_code)
          this.$set(this.formData, 'area_code', healthInfo.data.data.area_code)
        if (healthInfo.data.data.area_name)
          this.$set(this.formData, 'area_name', healthInfo.data.data.area_name)
        if (healthInfo.data.data.street_code)
          this.$set(
            this.formData,
            'street_code',
            healthInfo.data.data.street_code
          )
        if (healthInfo.data.data.street_name)
          this.$set(
            this.formData,
            'street_name',
            healthInfo.data.data.street_name
          )
        if (healthInfo.data.data.community_code)
          this.$set(
            this.formData,
            'community_code',
            healthInfo.data.data.community_code
          )
        if (healthInfo.data.data.community_name)
          this.$set(
            this.formData,
            'community_name',
            healthInfo.data.data.community_name
          )
        if (healthInfo.data.data.quarter)
          this.$set(this.formData, 'quarter', healthInfo.data.data.quarter)
        if (healthInfo.data.data.community_code)
          this.$set(this, 'cascaderValue', healthInfo.data.data.community_code)
        if (
          healthInfo.data.data.area_name &&
          healthInfo.data.data.street_name &&
          healthInfo.data.data.community_name
        ) {
          this.$set(
            this.formData,
            'ascription',
            healthInfo.data.data.area_name +
              '/' +
              healthInfo.data.data.street_name +
              '/' +
              healthInfo.data.data.community_name
          )
        }
        if (healthInfo.data.data.address)
          this.$set(this.formData, 'address', healthInfo.data.data.address)
        /*流行病学史*/
        if (healthInfo.data.data.is_lxbxs_zgdqljs_br)
          this.$set(
            this.formData,
            'is_lxbxs_zgdqljs_br',
            healthInfo.data.data.is_lxbxs_zgdqljs_br
          )
        if (healthInfo.data.data.is_lxbxs_zgdqljs_gtjzz)
          this.$set(
            this.formData,
            'is_lxbxs_zgdqljs_gtjzz',
            healthInfo.data.data.is_lxbxs_zgdqljs_gtjzz
          )
        if (healthInfo.data.data.is_lxbxs_zgdqljs_gtjzz_residents)
          this.$set(
            this.formData,
            'is_lxbxs_zgdqljs_gtjzz_residents',
            healthInfo.data.data.is_lxbxs_zgdqljs_gtjzz_residents
          )
        if (healthInfo.data.data.is_lxbxs_jwljs_br)
          this.$set(
            this.formData,
            'is_lxbxs_jwljs_br',
            healthInfo.data.data.is_lxbxs_jwljs_br
          )
        if (healthInfo.data.data.is_lxbxs_jwljs_gtjzz)
          this.$set(
            this.formData,
            'is_lxbxs_jwljs_gtjzz',
            healthInfo.data.data.is_lxbxs_jwljs_gtjzz
          )
        if (healthInfo.data.data.is_lxbxs_jwljs_gtjzz_residents)
          this.$set(
            this.formData,
            'is_lxbxs_jwljs_gtjzz_residents',
            healthInfo.data.data.is_lxbxs_jwljs_gtjzz_residents
          )
        if (healthInfo.data.data.is_lxbxs_jcfrhz_br)
          this.$set(
            this.formData,
            'is_lxbxs_jcfrhz_br',
            healthInfo.data.data.is_lxbxs_jcfrhz_br
          )
        if (healthInfo.data.data.is_lxbxs_jcfrhz_gtjzz)
          this.$set(
            this.formData,
            'is_lxbxs_jcfrhz_gtjzz',
            healthInfo.data.data.is_lxbxs_jcfrhz_gtjzz
          )
        if (healthInfo.data.data.is_lxbxs_jcfrhz_gtjzz_residents)
          this.$set(
            this.formData,
            'is_lxbxs_jcfrhz_gtjzz_residents',
            healthInfo.data.data.is_lxbxs_jcfrhz_gtjzz_residents
          )
        if (healthInfo.data.data.is_lxbxs_jcxggrz_br)
          this.$set(
            this.formData,
            'is_lxbxs_jcxggrz_br',
            healthInfo.data.data.is_lxbxs_jcxggrz_br
          )
        if (healthInfo.data.data.is_lxbxs_jcxggrz_gtjzz)
          this.$set(
            this.formData,
            'is_lxbxs_jcxggrz_gtjzz',
            healthInfo.data.data.is_lxbxs_jcxggrz_gtjzz
          )
        if (healthInfo.data.data.is_lxbxs_jcxggrz_gtjzz_residents)
          this.$set(
            this.formData,
            'is_lxbxs_jcxggrz_gtjzz_residents',
            healthInfo.data.data.is_lxbxs_jcxggrz_gtjzz_residents
          )
        if (healthInfo.data.data.is_lxbxs_jjx_br)
          this.$set(
            this.formData,
            'is_lxbxs_jjx_br',
            healthInfo.data.data.is_lxbxs_jjx_br
          )
        if (healthInfo.data.data.is_lxbxs_jjx_gtjzz)
          this.$set(
            this.formData,
            'is_lxbxs_jjx_gtjzz',
            healthInfo.data.data.is_lxbxs_jjx_gtjzz
          )
        if (healthInfo.data.data.is_lxbxs_jjx_gtjzz_residents)
          this.$set(
            this.formData,
            'is_lxbxs_jjx_gtjzz_residents',
            healthInfo.data.data.is_lxbxs_jjx_gtjzz_residents
          )
        /*风险人群*/
        if (healthInfo.data.data.is_fxrq_lxbxs_br)
          this.$set(
            this.formData,
            'is_fxrq_lxbxs_br',
            healthInfo.data.data.is_fxrq_lxbxs_br
          )
        if (healthInfo.data.data.is_fxrq_lxbxs_gtjzz)
          this.$set(
            this.formData,
            'is_fxrq_lxbxs_gtjzz',
            healthInfo.data.data.is_fxrq_lxbxs_gtjzz
          )
        if (healthInfo.data.data.is_fxrq_lxbxs_gtjzz_residents)
          this.$set(
            this.formData,
            'is_fxrq_lxbxs_gtjzz_residents',
            healthInfo.data.data.is_fxrq_lxbxs_gtjzz_residents
          )
        if (healthInfo.data.data.is_fxrq_jkll_br)
          this.$set(
            this.formData,
            'is_fxrq_jkll_br',
            healthInfo.data.data.is_fxrq_jkll_br
          )
        if (healthInfo.data.data.is_fxrq_jkll_gtjzz)
          this.$set(
            this.formData,
            'is_fxrq_jkll_gtjzz',
            healthInfo.data.data.is_fxrq_jkll_gtjzz
          )
        if (healthInfo.data.data.is_fxrq_jkll_gtjzz_residents)
          this.$set(
            this.formData,
            'is_fxrq_jkll_gtjzz_residents',
            healthInfo.data.data.is_fxrq_jkll_gtjzz_residents
          )
        if (healthInfo.data.data.is_fxrq_jzyx_br)
          this.$set(
            this.formData,
            'is_fxrq_jzyx_br',
            healthInfo.data.data.is_fxrq_jzyx_br
          )
        if (healthInfo.data.data.is_fxrq_jzyx_gtjzz)
          this.$set(
            this.formData,
            'is_fxrq_jzyx_gtjzz',
            healthInfo.data.data.is_fxrq_jzyx_gtjzz
          )
        if (healthInfo.data.data.is_fxrq_jzyx_gtjzz_residents)
          this.$set(
            this.formData,
            'is_fxrq_jzyx_gtjzz_residents',
            healthInfo.data.data.is_fxrq_jzyx_gtjzz_residents
          )
        if (healthInfo.data.data.is_fxrq_xgfy_br)
          this.$set(
            this.formData,
            'is_fxrq_xgfy_br',
            healthInfo.data.data.is_fxrq_xgfy_br
          )
        if (healthInfo.data.data.is_fxrq_xgfy_gtjzz)
          this.$set(
            this.formData,
            'is_fxrq_xgfy_gtjzz',
            healthInfo.data.data.is_fxrq_xgfy_gtjzz
          )
        if (healthInfo.data.data.is_fxrq_xgfy_gtjzz_residents)
          this.$set(
            this.formData,
            'is_fxrq_xgfy_gtjzz_residents',
            healthInfo.data.data.is_fxrq_xgfy_gtjzz_residents
          )
        if (healthInfo.data.data.is_fxrq_bj_br)
          this.$set(
            this.formData,
            'is_fxrq_bj_br',
            healthInfo.data.data.is_fxrq_bj_br
          )
        if (healthInfo.data.data.is_fxrq_bj_gtjzz)
          this.$set(
            this.formData,
            'is_fxrq_bj_gtjzz',
            healthInfo.data.data.is_fxrq_bj_gtjzz
          )
        if (healthInfo.data.data.is_fxrq_bj_gtjzz_residents)
          this.$set(
            this.formData,
            'is_fxrq_bj_gtjzz_residents',
            healthInfo.data.data.is_fxrq_bj_gtjzz_residents
          )
        if (healthInfo.data.data.is_fxrq_nrsq_br)
          this.$set(
            this.formData,
            'is_fxrq_nrsq_br',
            healthInfo.data.data.is_fxrq_nrsq_br
          )
        if (healthInfo.data.data.is_fxrq_nrsq_gtjzz)
          this.$set(
            this.formData,
            'is_fxrq_nrsq_gtjzz',
            healthInfo.data.data.is_fxrq_nrsq_gtjzz
          )
        if (healthInfo.data.data.is_fxrq_nrsq_gtjzz_residents)
          this.$set(
            this.formData,
            'is_fxrq_nrsq_gtjzz_residents',
            healthInfo.data.data.is_fxrq_nrsq_gtjzz_residents
          )
      }
      this.autoLocationCallback()
    },
    autoLocationCallback() {
      const healthLoc = localStorage.getItem('healthLoc')
        ? JSON.parse(localStorage.getItem('healthLoc'))
        : {}
      const healthData = localStorage.getItem('healthData')
        ? JSON.parse(localStorage.getItem('healthData'))
        : {}
      localStorage.setItem('healthLoc', '')
      // 缓存表单项赋值
      if (!this.$common.xeUtils.isEmpty(healthData)) {
        this.formData = healthData
      }
      // 经纬度赋值
      if (healthLoc.lng && healthLoc.lat) {
        this.$set(this.formData, 'lng', healthLoc.lng)
        this.$set(this.formData, 'lat', healthLoc.lat)
      }
    },
    pickerChange(type) {
      this.pickerType = type
      switch (type) {
        case 'ascription':
          this.popupState = 'cascader'
          this.popupShow = true
          break
        case 'map':
          this.popupState = 'map'
          this.popupShow = true
          break
        // case 'relationship':
        //   this.popupState = 'picker'
        //   this.pickerType = 'relationship'
        //   this.pickerData = this.dictData.relationship
        //   this.popupShow = true
        //   break
      }
    },
    pickerConfirm(e) {
      switch (
        this.pickerType
        // case 'relationship':
        //   this.formData.relationship_name = e.text
        //   this.formData.relationship = e.value
        //   this.popupShow = false
        //   break
      ) {
      }
    },
    pickerCancel(e) {
      switch (
        this.pickerType
        // case 'relationship':
        //   this.formData.relationship_name = ''
        //   this.formData.relationship = ''
        //   this.popupShow = false
        //   break
      ) {
      }
    },
    cascaderFinish({ value, selectedOptions, tabIndex }) {
      this.formData.ascription =
        selectedOptions[0].name +
        '/' +
        selectedOptions[1].name +
        '/' +
        selectedOptions[2].name
      this.formData.area_code = selectedOptions[0].code
      this.formData.street_code = selectedOptions[1].code
      this.formData.community_code = selectedOptions[2].code
      this.formData.area_name = selectedOptions[0].name
      this.formData.street_name = selectedOptions[1].name
      this.formData.community_name = selectedOptions[2].name
      this.popupShow = false
    },
    cascaderClose() {
      this.formData.ascription = ''
      this.formData.area_code = ''
      this.formData.street_code = ''
      this.formData.community_code = ''
      this.formData.area_name = ''
      this.formData.street_name = ''
      this.formData.community_name = ''
      this.popupShow = false
    },
    failNotice(msg) {
      this.$notify({ type: 'danger', message: msg })
    },
    onFailed(errorInfo) {
      this.failNotice(errorInfo.errors[0].message)
    },
    // 身份证校验
    cardNoValidator(val) {
      const reg = identityCodeValid(val)
      if (!reg.pass) return false
    },
    // 体温校验
    tempValidator(val) {
      return identityTemp(val)
    },
    beforeSubmitAction() {
      this.$refs.form.submit()
    },
    getLocation() {
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
          (res) => {
            console.log('当前位置信息', res)
            this.formData.lng = res.coords.longitude
            this.formData.lat = res.coords.latitude
            this.submitAction()
          },
          (res) => {
            // this.$toast('获取定位失败')
            this.submitAction()
          },
          {
            enableHighAccuracy: true, // 高精度
            timeout: 5000, // 超时时间
          }
        )
      } else {
        this.$toast('定位失败')
      }
    },
    // 位置校验
    locValidator(val) {
      return this.formData.lng && this.formData.lat
    },
    getLngLat(e) {
      this.formData.lng = e.lng
      this.formData.lat = e.lat
      this.popupClose()
    },
    popupClose() {
      this.popupState = ''
      this.popupShow = false
    },
    onSubmit() {
      //校验
      const today = this.$common.xeUtils.toDateString(new Date(), 'yyyy-MM-dd')
      const latest = this.$common.xeUtils.toDateString(
        this.formData.create_time || '',
        'yyyy-MM-dd'
      )
      // if (today == latest && this.route.type != 'outsider') {
      //   this.$toast('当日已填报，请勿重复上报')
      //   return
      // }
      // 获取位置
      this.submitAction()
    },
    submitAction() {
      // 数据处理
      this.formData.symptom = this.formData.discomfortArr.join(',')
      // 提交
      this.$dialog
        .confirm({
          title: '是否确认提交',
          message: '',
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          confirmButtonColor: '#D58913',
          beforeClose: async (action, done) => {
            if (action === 'confirm') {
              const param = { ...this.formData, ...this.route }
              console.log('最终提交信息', param)
              const insertData = await this.submitApiName(param)
              if (insertData.data.errcode == 0) {
                this.$toast('操作成功')
                setTimeout(() => {
                  // this.$router.go(-1)
                  this.$router.push({
                    path: '/school',
                    query:{
                      ...this.$store.state.user.userInfo
                    }
                  })
                }, 500)
                done()
              } else {
                this.$toast(insertData.data.errmsg)
                done()
              }
            } else {
              done()
            }
          },
        })
        .catch(() => {})
    },
  },
}
</script>

<style lang="less" scoped>
.container /deep/ .van-checkbox {
  min-height: 30px;
}

.container /deep/ .van-field__label span {
  display: inline-block;
  padding-left: 5px;
  width: 82%;
  text-align-last: justify;
}

.van-cell::after {
  display: none;
}

.container {
  background: url('../../assets/images/school/bg_health.jpg') no-repeat;
  background-size: contain;
  //background: #F2F7FB;
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  color: black;

  &-inner {
    padding: 130px 20px 50px;
    overflow: auto;

    .card {
      background: inherit;

      &-container {
        border-radius: 10px;
        overflow: hidden;
        background-color: white;
        padding: 10px;

        &-item {
          margin-bottom: 10px;
        }

        &-item:not(:last-child) {
          border-bottom: 1px solid #ebedf0;
        }
      }

      &-item {
        &-subtitle {
          padding: 0px 5px;
          font-size: 15px;
          margin-bottom: 5px;
        }

        &-label {
          color: #a0a0a0;
          font-size: 14px;
          position: relative;
          padding-left: 20px;
          padding-right: 10px;
        }

        &-label::before {
          position: absolute;
          left: 8px;
          color: #ee0a24;
          font-size: 14px;
          content: '*';
        }
      }
    }
  }

  .footer {
    padding: 20px;
    font-size: 12px;
    display: flex;
    align-items: center;

    &-content {
      width: 80%;
      display: inline-block;
      text-align: center;

      & > div {
        display: inline-block;
        color: #bbb;
        font-weight: bold;
      }
    }

    &::before,
    &::after {
      content: '';
      width: 10%;
      border-top: 1px #bbb solid;
      display: inline-block;
      vertical-align: middle;
    }
  }

  .bottom-bar {
    position: fixed;
    bottom: 0;
    width: 100%;
  }
}
</style>
